<template>
  <base-layout
    :dialogVisible="dialogVisible"
    :dialogTitle="dialogTitle"
    @dialog-close="dialogClose"
    :visibleContent3="false"
  >
    <template #contentPanel>
      <el-form
        :inline="true"
        ref="formData"
        :model="formData"
        :rules="rules"
        label-width="90px"
        label-position="right"
      >
        <el-row>
          <el-col :span="12">盘点单信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item label="盘点单号:">
              <el-input clearable readonly v-model="formData.code" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="盘点门店:" prop="storeId">
              <Job-shop v-model="formData.storeId" placeholder="盘点门店" :disabled="$route.query.id!==undefined" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="盘点仓库:" prop="storageId">
              <el-select
                clearable
                style="width: 200px"
                v-model="formData.storageId"
                @change="changeStorage"
                placeholder="仓库"
              >
                <el-option
                  v-for="item in storageList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.storageName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="盘点仓位:" prop="storageSiteId">
              <el-select
                clearable
                style="width: 200px"
                v-model="formData.storageSiteId"
                placeholder="盘点仓位"
              >
                <el-option
                  v-for="item of storageSitList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.storageSiteName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单据日期:" prop="receiptsTime">
              <el-date-picker
                style="width: 200px"
                value-format="yyyy-MM-dd hh:mm:ss"
                v-model="formData.receiptsTime"
                type="datetime"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="盘点工时:" prop="workHours">
              <el-input clearable v-model.number="formData.workHours" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="盘点备注:" prop="remark">
              <el-input
                type="textarea"
                :rows="6"
                placeholder=""
                v-model="formData.remark"
                style="width: 600px"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">盘点人员</el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item label="盘点人员:" prop="checkUserId">
              <user-select
                v-model="formData.checkUserId"
                :store-id="formData.storeId"
                @change="userNameHChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系方式" prop="userPhone">
              <el-input placeholder="请输入" v-model="formData.userPhone" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-col :span="23" align="right" justify="center">
          <el-button type="success"
            v-permission="'brandCheckStorage:save'"
           @click="saveUpdate('formData')"
            >新增盘点单</el-button
          >
        </el-col>
      </el-row>
    </template>
  </base-layout>
</template>
<script>
import baseMixin from '@/mixins/base'
import { getDict } from '@/utils'
import {
  save,
  findById,
  update,
  storageSite,
  getStorageCode,
} from '@/api/pre-sale/boutiqueStock/inventoryCheck'
import { findByStore } from '@/api/after-sale/storehouseManage/warehouseManage'
import UserSelect from '@/components/CommonForm/UserSelect'

import store from '@/store'
export default {
  components: {
    UserSelect,
  },
  mixins: [
    baseMixin({
      // updateData: update,
      format(res) {
        return res.map((data) => {
          return data
        })
      },
    }),
  ],
  data() {
    return {
      formData: {
        id: '',
        code: '',
        storeId: '',
        storageId: '',
        storageSiteId: '',
        receiptsTime: '',
        workHours: '',
        remark: '',
        checkUserId: '',
        userName: '',
        userPhone: '',
        userType: false,
      },
      dict: [],
      showSelect: false, // 是否展示配件组件
      showEmployeeTable: false, //  是否展示员工组件
      storageList: [],
      storageSitList: [],
      rules: {
        receiptsTime: [
          { required: true, message: '请选择单据日期', trigger: 'change' },
        ],
        storageId: [
          { required: true, message: '请选择盘点仓库', trigger: 'blur' },
        ],
        // storageSit: [
        //   { required: true, message: '请选择盘点仓位', trigger: 'blur' },
        // ],
      },
    }
  },
  watch: {
    'formData.storeId': function (value) {
      if (value) {
        this.getWareHouse(value)
      } else {
        this.getWareHouse(store.state.user.entryStore)
      }
    },
      'formData.storageId': function (value) {
      if (value) {
        this.getStorageSite({storageId:value,storeId:this.formData.storeId })
      } else {
        this.storageSitList=[]
      }
    },
  },
  methods: {
    // 负责人选择
    userNameHChange(item) {

      this.formData = {
        ...this.formData,
        userName: item.userName,
        userPhone: item.phone,
      }
    },
    changeStorage(storageId) {
      this.getStorageSite({ storageId,storeId:this.formData.storeId })
    },
    // 获取仓库
    async getWareHouse(id) {
      let { data } = await findByStore(id)
      this.storageList = data
    },
    // 获取仓位
    async getStorageSite(param) {
      let { data } = await storageSite(param)
      this.storageSitList = data.content || []
    },
    saveUpdate() {
      const { id } = this.$route.query
      this.$refs['formData'].validate(async (valid) => {
        if (valid) {
          if (id) {
            await update(this.formData)
            this.$router.go(-1)
          } else {
            await save(this.formData)
            this.$router.go(-1)
          }
        }
      })
    },
  //详细
    async detail(id) {
      let { data } = await findById(id)
     this.$nextTick(()=>{
        this.formData ={
        ...this.formData,
        ...data
      }
     })
    },
    ////生成编号
    async getStorageCode() {
      let { data } = await getStorageCode()
      this.formData.code = data
    },
  },
  mounted() {
    let id = this.$route.query.id
    if (id) {
      this.formData.id = id
      this.detail(id)
    } else {
      this.getStorageCode()
    }
  },
}
</script>
<style lang="scss" scoped>
</style>
